<template>
  <div class="modelView">
    <!--    modelListInit: [],-->
    <!--    modelList: [],-->
    <!--    handleLeftBox: {-->
    <!--    flag: true,-->
    <!--    isIndeterminate: false,-->
    <!--    allMmodel: false,-->
    <!--    choseModels: [],-->
    <!--    },-->
    <vHeader licon="el-amsp-zuzhi2" @lclick="handleLeftBox.flag = !handleLeftBox.flag" />
    <!-- <vLeft v-show="handleLeftBox.flag" 
    :handleLeftBox="handleLeftBox"
    :modelList="modelList"
    :areaVolume="three.areaVolume"
    @changeShow="changeShow"/>

    <div class="vsBox" v-show="vsBoxData.volume">
        <p><span>体积 (mm³):</span>
           {{vsBoxData.volume.toFixed(2)}} 
        </p>
        <p><span>表面积 (mm²):</span>
           {{vsBoxData.area.toFixed(2)}} 
        </p>
        <p><span>最小包围盒 (mm):</span>
           {{vsBoxData.boxsize.x.toFixed(2)}}×{{vsBoxData.boxsize.y.toFixed(2)}}×{{vsBoxData.boxsize.z.toFixed(2)}}
        </p>
    </div>

    <vBottomTwo :handleBottomBox="handleBottomBox" :handleBottomBtn="handleBottomBtn"
    @toolFn="toolFn" @sixView="sixView"/>

    <vBottom :handleBottomBox="handleBottomBox" :handleLeftBox="handleLeftBox"/>

    <amsp-pop class="addLinePop" title="标注" width="80%" :visible.sync="commentBox.newLine.flag" :before-close="clearLine">
      <el-form class="addLineForm" ref="addLineForm" :model="commentBox.newLine.form" :rules="commentBox.newLine.rules"  label-position="left" label-width="90px" @submit.native.prevent>
            <el-form-item label="标注人" prop="user">
              <el-input placeholder="请输入标注人" v-model.trim="commentBox.newLine.form.user" disabled @blur="onBlur"></el-input>
            </el-form-item>
            <el-form-item label="标注内容" prop="content">
              <el-input placeholder="请输入标注内容" v-model.trim="commentBox.newLine.form.content" @blur="onBlur"></el-input>
            </el-form-item>
          <div class="addLineeFormBtns">
            <el-button round @click="clearLine">取消</el-button>
            <el-button round type="primary" @click="setAddLinePop">确定</el-button>
          </div>

      </el-form>
    </amsp-pop> -->

    <div class="screen3d" ref="screen3d" v-loading="three.loading" :element-loading-text="loadText"></div>
    <div id="inset3d"></div>
  </div>
</template>

<script>
import Vue from 'vue'
import * as THREE from 'three';
import { ThreeMFLoader } from 'three/examples/jsm/loaders/3MFLoader'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';
// import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
// import { VertexNormalsHelper } from 'three/examples/jsm/helpers/VertexNormalsHelper.js';



// import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
// import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
// import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
// import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js';
// import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js';

import html2canvas from "html2canvas"

import { deepCopy } from '@/utils/tools/tools'

import { addLabelContent, queryLabelContents } from '@/depends/api/labelContent'
import { uploadModelColorBase64 } from '@/depends/api/medicalRecord'


import vHeader from './pub/v-header'
import vLeft from './modelView/v-left'
import vBottom from './modelView/v-bottom'
import vBottomTwo from './modelView/v-bottom-two'
// import vMark from './modelView/v-mark'
import newApp from './modelView/newApp'
import { mapGetters } from "vuex";
// let currentDownUp = {
//   time: 0,
//   downKey: ''
// };




let moved = false;

let threeObj2 = {
  container2: null,
  renderer2: null,
  camera2: null,
  axes2: null,
  scene2: null
}
let threeObj = {

  // composer: null,
  // outlinePass: null,
  // effectFXAA: null,


  currentKey: '',
  modelScaleForDistance:0,
  renderer: null,
  controls: null,
  manager: null,
  // transformControl: null,
  centerModel: null,
  scene: null,
  labelRenderer: null,
  models: {},
  modelsMeshs: [],
  modelsHelper: {},
  group: null,
  modelsClipPlanes: {},
  mouse: null,
  raycaster: null,
  content: {
    ambientLight: null,
    directionalLight: null,
    grid: null,
  },
  loder: {
    ThreeMFLoader: null,
  }
}
let onPointerUpsTime = ''
export default {
  components: {
    vHeader,
    vLeft,
    vBottom,
    vBottomTwo,
    // vMark
  },
  props: ['modelLists'],
  // provide () {
  //   return {
  //     handleLeftBox: this.handleLeftBox
  //   }
  // },
  data() {
    return {
      vsBoxData: {
        volume: 0,
        area: 0,
        boxsize: { x: 0, y: 0, z: 0 }
      },
      modelListInit: [],
      modelList: [],
      modelLoadedList: [],
      handleLeftBox: {
        flag: true,
        isIndeterminate: false,
        allMmodel: false,
        choseModels: [],
      },
      handleBottomBtn: {
        annotation: false,
        measureLong: false,
        measureAngle: false,
        activeSixViewIndex: 0,
        annotationArr: [],
        measureLongArr: [],
        measureAngleArr: [],
        hiddenMeasure: false
      },
      pointLocation: {
        line: [],
        lineMesh: [],
        overType: [],
      },
      commentBox: {
        comments: [],
        newLine: {
          flag: false,
          form: {
            id: '',
            user: '',
            content: ''
          },
          rules: {
            user: [{ required: true, message: '请输入标注人', trigger: 'blur' }],
            content: [{ required: true, message: '请输入标注内容', trigger: 'blur' }],
          }
        }
      },
      handleBottomBox: {
        tool: {
          flag: false,
        },
        sixView: {
          flag: false
        },
        sectionFrom: {
          flag: false,
          xRange: [0, 0],
          yRange: [0, 0],
          zRange: [0, 0],
          x: [],
          y: [],
          z: []
        },
        colorFrom: {
          flag: false,
          colors: ['#fff0ce', '#ff0000', '#0055ff', '#642b1a', '#75534a', '#aaaaff', '#00ffff', '#55ff00', '#55ff7f', '#aaff7f', '#ffaaff', '#ffffff', '#dfdfdf', '#ffaa00', '#55aaff', '#fad8cc', '#c01212', '#ffff00'],
          color: ''
        },
        alphaFrom: {
          flag: false,
          opacity: 100
        },
      },
      three: {
        loading: false,
        loadProgress: {

        },
        areaVolume: { area: 0, volume: 0 }
      },
      sessionId: '',
      userInfo: {
        sessionId: '',
        name: ''
      },
      newBoxFlag: false,
      scale:  0,
      translate: {x:0,y:0,z:0,maxDis:0}
    };
  },
  computed: {
    ...mapGetters('user', ['getUserInfo']),
    loadText() {
      let _new = {
        cur: 0,
        total: 0
      }
      for (let a in this.three.loadProgress) {
        _new.cur += Number(this.three.loadProgress[a])
        _new.total += Number(a)
      }
      return '平台未开小差,请耐心等待 ' + ((_new.cur / _new.total * 100) || 0).toFixed(2) + '%'
    }

  },
  created() {
    this.modelList = this.modelLists
    this.modelListInit = deepCopy(this.modelList)
    this.handleLeftBox.choseModels = []
    this.userInfo = this.getUserInfo;
    if (typeof this.userInfo.sessionId !== 'undefined') {
      this.commentBox.newLine.form.user = this.userInfo.name;
    } else {
      this.commentBox.newLine.form.user = '';
    }

  },
  mounted() {
    this.init()
    this.initModels2(this.modelList)
    //渲染坐标帮助
    // this.animate()
  },
  methods: {
    init() {
      threeObj.raycaster = new THREE.Raycaster();
      threeObj.mouse = new THREE.Vector2();


      threeObj.renderer = new THREE.WebGLRenderer({ antialias: true })
      // threeObj.renderer.setPixelRatio(window.devicePixelRatio);
      //dpr > 2 的机型如：iphone6plus 等，需注意模型太大时，会导致闪退，需要设置
      threeObj.renderer.setPixelRatio(window.devicePixelRatio < 3 ? window.devicePixelRatio : 1)
      threeObj.renderer.setSize(window.innerWidth, window.innerHeight);
      this.$refs.screen3d.appendChild(threeObj.renderer.domElement);




      threeObj.scene = new THREE.Scene();
      threeObj.scene.background = new THREE.Color(0xffffff);
      threeObj.scene.add(new THREE.AmbientLight(0xffffff, 0.4));
      // threeObj.camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000);


      // threeObj.camera.up.set( 0, 0, 1 );
      // threeObj.scene.add( threeObj.camera );
      //必须设置10000不然,缩小太小摄像机拍摄不到为空白
      threeObj.camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 1e10);
      threeObj.camera.position.y = -50;
      threeObj.camera.up.z = 1;
      threeObj.camera.receiveShadow = true;
      threeObj.camera.castShadow = true;
      threeObj.camera.lookAt(0,0,0);

      // Z is up for objects intended to be 3D printed.

      // threeObj.camera.up.set(0, 0, 1);
      // // threeObj.camera.position.set( 0, 0, 10000 );
      threeObj.scene.updateMatrixWorld(true);
       threeObj.scene.add(threeObj.camera)

       var dirLight = new THREE.PointLight( 0xffffff,0.7);
        dirLight.castShadow = true;
        dirLight.shadow.mapSize.height=2048;
            dirLight.shadow.mapSize.width=2048;
            threeObj.camera.add( dirLight );

        var bulbLight = new THREE.PointLight( 0xffffff, 0.9 );
        bulbLight.position.set( 0, 0, 0 );
        bulbLight.visible = false;
        threeObj.scene.add( bulbLight );




      // threeObj.group = new THREE.Group()

      // threeObj.renderer.clippingPlanes = [];
      // threeObj.renderer.localClippingEnabled = true;

      // const controls = new OrbitControls( camera, threeObj.labelRenderer.domElement );

      // threeObj.controls = new OrbitControls(threeObj.camera, threeObj.labelRenderer.domElement);
      // threeObj.controls = new OrbitControls(threeObj.camera, threeObj.renderer.domElement);
      // //控制旋转和放大缩小等重新渲染
      // threeObj.controls.addEventListener('change', this.render);
      // threeObj.controls.target.set(0, 0, 0);
      // threeObj.controls.update();

      //aa
      threeObj.controls = new TrackballControls( threeObj.camera , threeObj.renderer.domElement);
      threeObj.controls.rotateSpeed = 5;
      threeObj.controls.zoomSpeed = 4;
      threeObj.controls.panSpeed = 2;
      threeObj.controls.staticMoving = true;
      threeObj.controls.dynamicDampingFactor = 0.3;
      // //控制旋转和放大缩小等重新渲染
      threeObj.controls.addEventListener('change', this.render);
      threeObj.controls.target.set(0, 0, 0);
      threeObj.controls.update();
      //

      // const _div = document.createElement( 'div' )
      // _div.id = '_indicateLabel'
      // threeObj.centerModel = new CSS2DObject( _div )
      // threeObj.centerModel.visible = false
      // threeObj.scene.add( threeObj.centerModel );


      threeObj.camera.add(new THREE.PointLight(0xffffff, 0.8));


      threeObj.manager = new THREE.LoadingManager();
      threeObj.manager.onProgress = function (item, loaded, total) {
        //可以用次读取进度(模型名字,已经加载完模型的个数,需要加载模型总个数)例如4个模型,加载完1个(1,4)
        console.log(item, loaded, total);
      };
      // threeObj.manager.onLoad = function () {

      // const aabb = new THREE.Box3().setFromObject( object );
      // const center = aabb.getCenter( new THREE.Vector3() );

      // object.position.x += ( object.position.x - center.x );
      // object.position.y += ( object.position.y - center.y );
      // object.position.z += ( object.position.z - center.z );

      // controls.reset();

      // threeObj.scene.add( object );
      // // this.render();

      // };

      threeObj.loder.ThreeMFLoader = new ThreeMFLoader(threeObj.manager);
      // console.log(threeObj.loder.ThreeMFLoader)
      threeObj.loder.ThreeMFLoader.requestHeader['Cache-Control'] = 'max-age=30'
      // threeObj.loder.ThreeMFLoader.requestHeader['Pragma'] = 'public'


      // this.initModels(this.modelList)
    
      // this.initModels2(this.modelList)

      // this.setupInset();
    
      window.addEventListener('resize', this.onWindowResize);
      this.animate()
      // pointerdown
      // pointerup
      // threeObj.controls.addEventListener( 'change', () => { moved = true; });
      // threeObj.renderer.domElement.addEventListener( 'pointerdown', () => { moved = false; }, false );//鼠标、触摸屏点击下,类似mousedown
      // threeObj.renderer.domElement.addEventListener( 'pointerup', this.onPointerUps, false );//鼠标、触摸屏点击后,类似mousedown
      // threeObj.renderer.domElement.addEventListener( 'touchstart', () => { moved = false; }, false );
      // threeObj.renderer.domElement.addEventListener( 'touchend', this.onPointerUps, false );



    },

    animate() {

      window.requestAnimationFrame(this.animate);

      threeObj.controls.update();

      //copy position of the camera into inset

      threeObj.renderer.render(threeObj.scene, threeObj.camera);


      // threeObj2.camera2.position.copy( threeObj.camera.position );
      // threeObj2.camera2.position.sub( threeObj.controls.target );
      // threeObj2.camera2.position.setLength( 300 );
      // threeObj2.camera2.lookAt( threeObj2.scene2.position );
      // threeObj2.renderer2.render( threeObj2.scene2, threeObj2.camera2 );


    },


    initModels(modeArr) {
      this.three.loading = true
      Promise.all((() => {
        return modeArr.map((a, index) => {
          return this.loadModel(a, index)
        })
      })()).then(resArr => {
        // this.$parent.$refs.ctView.showOne()
        this.three.loading = false
        // resArr.forEach((a, b) => {
        //   let meshs = []
        //   threeObj.modelsClipPlanes[a.modelInfo.id] = [
        //     new THREE.Plane( new THREE.Vector3( - 1, 0, 0 ), 0 ),
        //     new THREE.Plane( new THREE.Vector3( 0, - 1, 0 ), 0 ),
        //     new THREE.Plane( new THREE.Vector3( 0, 0, - 1 ), 0 ),
        //     new THREE.Plane( new THREE.Vector3( 1, 0, 0 ), 0 ),
        //     new THREE.Plane( new THREE.Vector3( 0, 1, 0 ), 0 ),
        //     new THREE.Plane( new THREE.Vector3( 0, 0, 1 ), 0 ),
        //   ]
        //   a.group.traverse( ( child ) => {
        //     // if (child.type == 'BufferGeometry') {
        //     //   console.log(child ,1111111)
        //     //   delete child.attributes.color
        //     // }
        //     if (child.type == 'Mesh') {
        //       let _color = ''
        //       if (child.geometry && child.geometry.attributes.color) {
        //         _color = new THREE.Color(child.geometry.attributes.color.array[0],
        //                 child.geometry.attributes.color.array[1],
        //                 child.geometry.attributes.color.array[2]).getHexString()
        //         if (child.geometry.attributes.color) child.geometry.attributes.color.array.fill(1)
        //       }
        //       // console.log(child)
        //       child.visible = a.modelInfo.show
        //       child.alphaTest = 0.1
        //       child.name = a.modelInfo.name

        //       // child.material.depthTest = false
        //       //  child.material.depthWrite = false
        //       child.material.transparent = true
        //       // child.material.clipShadows = true
        //       child.material.clippingPlanes = threeObj.modelsClipPlanes[a.modelInfo.id]
        //       child.material.clipIntersection = false
        //       child.material.lights = true
        //         child.material.vertexTangents = false
        //       if (_color) child.material.color.set(`#${_color}`)
        //       child.material.rcolor = child.material.color.clone()
        //       this.modelList[b].color = `#${child.material.rcolor.clone().getHexString()}`
        //       child.material.opacity = a.modelInfo.opacity
        //       child.material.side = THREE.DoubleSide

        //       meshs.push(child)
        //       threeObj.modelsMeshs.push(child)
        //     }
        //   } );
        //   a.group.renderOrder = a.modelInfo.id
        //   threeObj.models[a.modelInfo.id] = a.group
        //   threeObj.models[`${a.modelInfo.id}meshs`] = meshs

        //   threeObj.group.add(a.group)
        //   // threeObj.scene.add( threeObj.modelsHelper[a.modelInfo.id]  )
        // })
        // console.log(threeObj.group)
        //  threeObj.scene.add( threeObj.group );
        if (this.$parent.$refs.ctView) {
          this.$parent.$refs.ctView.initct()
          this.$parent.$refs.ctView.busModel(threeObj.group.clone())
        }
        this.resetXYZ()
        //this.render();
        this.saveModelColors()

      })
    },
    initModels2(modeArr) {
      console.log(this.modelList)
      this.three.loading = true
      Promise.all((() => {
        return modeArr.map((a, index) => {
          return this.loadModel(a, index)
        })
      })()).then(resArr => {
        this.three.loading = false
    
      })

    },
    // 假设你的模型始终要在一个体对角线为长度 30 的正方体内，而你的摄像机在(0,-50,0)的位置，那么可以通过求模型的包围盒来算出模型的最大半径，然后缩放到该正方体内。
		computeScale(geometry) {
			geometry.computeBoundingBox();
			var maxX = geometry.boundingBox.max.x;
			var minX = geometry.boundingBox.min.x;
			var maxY = geometry.boundingBox.max.y;
			var minY = geometry.boundingBox.min.y;
			var maxZ = geometry.boundingBox.max.z;
			var minZ = geometry.boundingBox.min.z;

			var maxDis = Math.sqrt((maxX - minX) * (maxX - minX) + (maxY - minY) * (maxY - minY) + (maxZ - minZ) * (maxZ - minZ)) / 30;

			var scale = 1.0 / maxDis;

			var maxDisX = (maxX - minX);

			return {maxX,minX,maxY,minY,maxZ,minZ,maxDis,scale,maxDisX};
		},
    render() {
      console.log(threeObj.scene)
      //threejs的webglrenderer提供了compile方法来编译场景，先执行这个方法后，再开始渲染，就不会卡顿
      // threeObj.renderer.compile(threeObj.scene, threeObj.camera );
      threeObj.renderer.render(threeObj.scene, threeObj.camera);
      // threeObj.composer.render();
      // threeObj.labelRenderer.render( threeObj.scene, threeObj.camera );

    },
    onWindowResize() {

      threeObj.camera.aspect = window.innerWidth / window.innerHeight;
      threeObj.camera.updateProjectionMatrix();

      threeObj.renderer.setSize(window.innerWidth, window.innerHeight);
      // threeObj.labelRenderer.setSize( window.innerWidth, window.innerHeight );


      // threeObj.composer.setSize( window.width, window.height );
      // threeObj.effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );

      this.render();

    },
    loadModel(modelInfo, index) {
      console.log(modelInfo, index)
      return new Promise((reslove, reject) => {
      threeObj.loder.ThreeMFLoader.load(modelInfo.url, (group) => {
        console.log(group,'1111')
        // this.three.loading = false
        //test
        let meshs = []
        // threeObj.modelsClipPlanes[this.modelList[0].id] = [
        //     new THREE.Plane( new THREE.Vector3( - 1, 0, 0 ), 0 ),
        //     new THREE.Plane( new THREE.Vector3( 0, - 1, 0 ), 0 ),
        //     new THREE.Plane( new THREE.Vector3( 0, 0, - 1 ), 0 ),
        //     new THREE.Plane( new THREE.Vector3( 1, 0, 0 ), 0 ),
        //     new THREE.Plane( new THREE.Vector3( 0, 1, 0 ), 0 ),
        //     new THREE.Plane( new THREE.Vector3( 0, 0, 1 ), 0 ),
        // ]
        // group.computeVertexNormals();
        group.traverse((child) => {
          if (child.type == 'Mesh') {
            child.frustumCulled = false;
            let _color = ''
            if (child.geometry && child.geometry.attributes.color) {
              _color = new THREE.Color(child.geometry.attributes.color.array[0],
                child.geometry.attributes.color.array[1],
                child.geometry.attributes.color.array[2]).getHexString()
              if (child.geometry.attributes.color) child.geometry.attributes.color.array.fill(1) 
                  //
                  child.geometry.computeBoundingBox();
            var maxX = child.geometry.boundingBox.max.x;
            var minX = child.geometry.boundingBox.min.x;
            var maxY = child.geometry.boundingBox.max.y;
            var minY = child.geometry.boundingBox.min.y;
            var maxZ = child.geometry.boundingBox.max.z;
            var minZ = child.geometry.boundingBox.min.z;

            var maxDis = Math.sqrt((maxX - minX) * (maxX - minX) + (maxY - minY) * (maxY - minY) + (maxZ - minZ) * (maxZ - minZ)) / 30;

            var scale = 1.0 / maxDis;

            var maxDisX = (maxX - minX);
              //临时保存放大倍率
              threeObj.modelScaleForDistance=scale;
              if(!this.scale){
                this.scale = scale;
              }else if(scale < this.scale){
                this.modelLoadedList.forEach(function(self){
                  self.scale.multiplyScalar(scale/this.scale);
                });
                this.scale = scale;
              }
              child.scale.multiplyScalar(this.scale);
              child.position.set(this.translate.x*this.scale, this.translate.y*this.scale, this.translate.z*this.scale);
            //          
            }
            child.visible = modelInfo.show
            child.material.transparent = true
            // child.material.clipShadows = true

            // child.material.clippingPlanes = threeObj.modelsClipPlanes[modelInfo.id]
            child.material.clipIntersection = false
            //child.material.flatShading = false
            child.material.lights = true
            child.material.vertexTangents = false
            if (_color) child.material.color.set(`#${_color}`)
            child.material.rcolor = child.material.color.clone()
             this.modelList[index].color = `#${child.material.rcolor.clone().getHexString()}`
            child.material.opacity = modelInfo.opacity
            child.material.side = THREE.DoubleSide

           

            meshs.push(child)
            threeObj.modelsMeshs.push(child)

          }

        });        
				// var scale = this.computeScale(group);// 自动缩放
        //
     
       
        threeObj.models[modelInfo.id] = group
        threeObj.models[`${modelInfo.id}meshs`] = meshs
        this.modelLoadedList.push(group)
        threeObj.scene.add(group)

        // let box = new THREE.Box3().setFromObject(this.modelLoadedList[0])
        // const center = box.getCenter(new THREE.Vector3())
        // console.log(threeObj.controls.target)
        // console.log(center)
        // console.log(box.getSize())
        // threeObj.controls.target.x += (threeObj.controls.target.x + center.x);
        // threeObj.controls.target.y += (threeObj.controls.target.y + center.y);
        // threeObj.controls.target.z += (threeObj.controls.target.z + center.z);
        // let boxSize = box.getSize()
        // threeObj.camera.position.set(threeObj.controls.target.x, -boxSize.z * 2.4 + threeObj.controls.target.y, threeObj.controls.target.z)


        // // threeObj.camera.position.set(center.x,  boxSize.z*1.4 + center.y, center.z )

        // threeObj.camera.updateProjectionMatrix();  //更新摄像机投影矩阵。在任何参数被改变以后必须被调用。
        // threeObj.controls.update(); //更新控件。必须在对相机的变换进行任何手动更改后调用，


        // this.render();
        reslove({group, modelInfo})
        }, (xhr) => {
            console.error( xhr );
          this.$set(this.three.loadProgress, xhr.total, xhr.loaded)
        })
      });
      

    },

  },
  destroyed() {
    // this.ws.close();
  },
  beforeDestroy() {
    //内存中销毁删除
    try {
      threeObj.scene.clear()
      threeObj.renderer.dispose()
    } catch (e) {
      console.log(e)
    }
  },
}
</script>
<style scoped lang="less">
@nav_height: 50px;

.omit {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modelView {
  height: 100%;
  overflow: hidden;

  .vsBox {
    position: fixed;
    bottom: 100px;
    left: 0;
    padding-left: 10px;
    z-index: 1;

    p {
      font-size: 12PX;
      margin: 4PX 0;
    }
  }
}

.addLineForm .addLineeFormBtns {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;

  .el-button {
    color: #333;
    width: 135px;
    border: 1px solid #ffb700;
    background-color: #fff;

    &.el-button--primary {
      color: #fff;
    }
  }
}

#inset3d {
  width: 100PX;
  height: 100PX;
  background-color: transparent;
  border: none;
  margin: 0;
  padding: 0px;
  position: absolute;
  right: 0px;
  bottom: @nav_height;
  z-index: 2;
}
</style>

<style lang="less">
.labelBox {
  width: 120px;
  min-height: 35px;
  // min-height: 60px;
  // max-height: 80px;
  background-color: #FFFFF0;
  border: 1px solid #ffb700;
  overflow-y: auto;
  font-size: 12px;
}

#_indicateLabel {
  background-color: rgba(105, 105, 105, 0.8);
  border: 1PX solid #696969;
  width: 6PX;
  height: 6PX;
  border-radius: 50%;
  z-index: 999999 !important;
}

.lBox,
.aBox {
  font-size: 10px;
  color: #409EFF;
  background-color: #fff;
  border-radius: 4px;
  padding: 2px 6px;
}

#outCanvas {
  position: fixed;
  top: -10000px;
  left: -10000px;
  // z-index: 999;
}
</style>